<template>
	<view class="pages-a">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 图标logo -->
				<view class="custom-nav__back">
					<view class="logo-pic png-sussuspension1"
						style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1679989824360-assets/web-upload/d6f05bc7-7e47-4566-98fc-494350f4f5d2.png')">
						<view class="logo-image ">
						</view>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center"
					@click="tn('/homepages/search')">
					<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left"
						style="background-color: rgba(230,230,230,0.3);">
						<view class="tn-color-gray" style="width: 100%;">
							<tn-notice-bar :list="searlist" mode="vertical" leftIconName="search"
								:duration="6000"></tn-notice-bar>
						</view>
					</view>
				</view>
			</view>
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="margin-top: 15rpx;">

			<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="18000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<!-- <view class="swiper-item image-banner tn-shadow-blur" :style="'background-image:url('+ item.url + ');'">
                   </view> -->
					<view class="swiper-item image-banner">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					</view>
					<view class="swiper-item2 image-banner">
						<image class="png-sussuspension" :src="item.pngurl" mode="heightFix" v-if="item.type=='image'">
						</image>
					</view>
					<view class="swiper-item-text">
						<view class="text-sussuspension">
							<view class="tn-text-bold tn-color-black" style="font-size: 45rpx;">{{item.title}}</view>
							<view class="tn-color-black tn-padding-top-xs" style="font-size: 35rpx;">{{item.name}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in swiperList" :key="index">
					<view class="spot" :class="cardCur==index?'active':'tn-bg-black'"
						:style="'background-color: '+ item.color +''"></view>
				</block>
			</view>

			<!-- 大嘴鸟 -->
			<view class="dong">
				<view class="monster">
					<view class="monster__face">
						<view class="monster__eye avatar-eye avatar-eye--green eye--left">
							<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span
										class="avatar-eye-pupil-lightReflection"></span></span></view>
						</view>
						<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
							<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span
										class="avatar-eye-pupil-lightReflection"></span></span></view>
						</view>
						<view class="monster__noses">
							<view class="monster__nose"></view>
							<view class="monster__nose"></view>
						</view>
						<view class="monster__mouth">
							<view class="monster__top"></view>
							<view class="monster__bottom"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 标题-->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
				<view class="justify-content-item tn-margin-left tn-text-bold tn-text-xl blue-title">
					热门案例
				</view>
				<!-- <view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
					<text class="tn-padding-xs">更多</text>
					<text class="tn-icon-right"></text>
				</view> -->
			</view>
			<lm-order-list :orderList="paperList"></lm-order-list>
		</view>


		<view class='tn-tabbar-height'></view>
		<view class="bg-tabbar-shadow"></view>

	</view>


</template>

<script>
	import {
		getNotSaleList
	} from "@/api";
	export default {
		name: 'PagesA',
		data() {
			return {
				// 筛选
				index: 1,
				searlist: [
					'搜索 订单号',
					'搜索 订单名称',
				],
				cardCur: 0,
				paperList: [],
				swiperList: [{
					id: 0,
					type: 'image',
					color: '#FFB053',
					title: 'Frontend',
					name: '与你一起 · 简单生活',
					url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676011029131-assets/web-upload/62aadd95-d6db-4d7a-9fe7-ae615130e4ea.jpeg',
					pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1675941765043-assets/web-upload/a065231c-14c4-4c4d-ae40-5d39e9bc0725.png'
				}, {
					id: 1,
					type: 'image',
					color: '#53FFB1',
					title: 'Design',
					name: '与你一起 · 创意生活',
					url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676011496571-assets/web-upload/debcf577-e9ca-4ab0-b993-5b4bb2647d36.jpeg',
					pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1676011349283-assets/web-upload/ad460966-b629-4374-ac0c-6059ed8c5668.png'
				}, {
					id: 2,
					type: 'image',
					color: '#FF6253',
					title: 'Hotspot',
					name: '与你一起 · 舒适生活',
					url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676011893050-assets/web-upload/f427620a-8c6a-4b99-98e5-94066f54db9d.jpeg',
					pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1676011789258-assets/web-upload/87c66663-1eac-4fed-8783-5fe2c7c20e2d.png'
				}, {
					id: 3,
					type: 'image',
					color: '#79A4D9',
					title: 'Interview',
					name: '与你一起 · 悦享生活',
					url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1676012700829-assets/web-upload/fd154748-a5d2-4005-9470-f384f38a00e9.jpeg',
					pngurl: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1676012711907-assets/web-upload/e9e5cf10-33cc-40f1-ae69-b39df9ba4565.png'
				}, ],
			}
		},
		async mounted() {
			await this.getPaperList()
		},
		methods: {
			// 筛选
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},

			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			async getPaperList() {
				try {
					const res = await getNotSaleList();
					console.log('notForSale response:', res)
					let list = Array.isArray(res?.data) ? res.data : []
					console.log('notForSale data list:', list)
					if (!list.length) {
						list = [
						]
					}
					const toArray = (val) => {
						if (Array.isArray(val)) return val
						if (typeof val === 'string') {
							return val.split(',').map(v => v && v.trim()).filter(Boolean)
						}
						return []
					}
					this.paperList = list.map(raw => {
						const item = { ...raw }
						item.title = item.title || item.name || item.paperName || item.projectName || ''
						item.techList = toArray(item.techList || item.technicalSelection || item.technical_selection || item.tech)
						// 支持后端 categorySelectionMap 作为服务标签来源
						if (item.servicesList && Array.isArray(item.servicesList)) {
							item.servicesList = item.servicesList
						} else if (item.includingServices || item.including_services || item.services) {
							item.servicesList = toArray(item.includingServices || item.including_services || item.services)
						} else if (item.categorySelectionMap && typeof item.categorySelectionMap === 'object') {
							item.servicesList = Object.values(item.categorySelectionMap).filter(Boolean)
						} else {
							item.servicesList = []
						}
						item.totalPrice = item.totalPrice ?? item.expectedBudget ?? item.budget ?? item.price ?? 0
						item.notSale = item.notSale ?? item.isNotForSale ?? 0
						// 规范化ID，便于子组件点击跳转
						item.orderId = item.orderId ?? item.order_id ?? item.id ?? item.paperId ?? item.paper_id ?? item.projectId ?? item.project_id
						item.id = item.id ?? item.orderId
						return item
					})
					console.log(this.paperList, 'paperList')
				} catch (e) {
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages-a {
		width: 100%;
		height: 100%;
		position: relative;
		// background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	/* 底部tabbar假阴影 start*/
	.bg-tabbar-shadow {
		// background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
		box-shadow: 0rpx 0rpx 400rpx 0rpx rgba(0, 0, 0, 0.25);
		position: fixed;
		bottom: calc(0rpx + env(safe-area-inset-bottom) / 2);
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		height: 60rpx;
		width: 100vw;
		z-index: 0;
	}

	/* 阴影 start*/
	.home-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}


	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image {
		z-index: 9999 !important;
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic {
		z-index: 9999 !important;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */

	/* 旋转 */
	.png-sussuspension1 {
		animation: suspension1 12s ease-in-out infinite;
	}

	@keyframes suspension1 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.blue-title::before {
		content: "";
		position: absolute;
		display: block;
		width: 80rpx;
		height: 26rpx;
		background: #269EFC;
		margin-top: 24rpx;
		margin-left: 75rpx;
		opacity: 0.3;
		z-index: -1;
		border-radius: 4rpx;
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 360rpx !important;
		margin-top: -30rpx;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		padding: 30rpx 30rpx 30rpx 30rpx;
		overflow: initial;
		// border: 1rpx solid blueviolet;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 0rpx;
		transform: scale(0.85);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
		border-radius: 10rpx;
		// border: 1rpx solid blue;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item2 {
		margin-top: -370rpx;
		width: 620rpx;
		display: block;
		height: 515rpx;
		border-radius: 0rpx;
		transform: translate(240rpx, 0rpx) scale(0.45, 0.45);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
		// border: 1rpx solid black;
	}

	.card-swiper swiper-item.cur .swiper-item2 {
		margin-top: -385rpx;
		width: 620rpx;
		transform: translate(210rpx, 0rpx) scale(0.62, 0.62);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -300rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -350rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 0;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		// border: 1rpx solid orangered;
	}

	.spot {
		// background-color: #FBBD12;
		top: -80rpx;
		opacity: 0.1;
		width: 30rpx;
		height: 8rpx;
		border-radius: 2rpx;
		margin: 0 6rpx !important;
		left: -238rpx;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
	}


	.right-conetxt {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #00FFC8;
		align-items: center;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			color: #1D2541;
			background-color: #F3F2F7;
			border-radius: 10rpx;
			font-size: 22rpx;
			padding: 5rpx 15rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}


	/* 大单图 start*/
	.tn-blogger-content2 {
		&__wrap {
			padding: 30rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 55rpx;
			}
		}

		&__main-image {
			box-shadow: 0rpx 5rpx 40rpx 0rpx rgba(43, 158, 246, 0.2);
			border-radius: 16rpx;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}
	}

	.image-design {
		padding: 160rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 文章内容 end*/

	/* 大嘴鸟*/
	.dong {
		z-index: 9999;
		position: fixed;
		top: 100px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);

	}

	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}

	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}

	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}

	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}

	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}

	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}

	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}

	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}


	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}

	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}


	.eye--left {
		left: 10%;
	}

	.eye--right {
		left: 85%;
	}

	.eye--center {
		left: 45%;
		top: 10%;
	}

	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}


	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}

	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}


	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}

	/*大嘴动起来*/
	@keyframes t {

		0%,
		10%,
		80%,
		100% {
			top: -30px;
		}

		20% {
			top: 0px;
		}

		30% {
			top: -20px;
		}

		40% {
			top: -0px;
		}

		50% {
			top: -25px;
		}

		70% {
			top: 0px;
		}
	}

	@keyframes b {

		0%,
		10%,
		80%,
		100% {
			bottom: -30px;
		}

		20% {
			bottom: 0px;
		}

		30% {
			bottom: -20px;
		}

		40% {
			bottom: -0px;
		}

		50% {
			bottom: -25px;
		}

		70% {
			bottom: 0px;
		}
	}

	@keyframes mouth {

		0%,
		10%,
		100% {
			width: 100%;
			height: 0%;
		}

		15% {
			width: 90%;
			height: 30%;
		}

		20% {
			width: 50%;
			height: 70%;
		}

		25% {
			width: 70%;
			height: 70%;
		}

		30% {
			width: 80%;
			height: 60%;
		}

		35% {
			width: 60%;
			height: 70%;
		}

		40% {
			width: 55%;
			height: 75%;
		}

		45% {
			width: 50%;
			height: 90%;
		}

		50% {
			width: 40%;
			height: 70%;
		}

		55% {
			width: 70%;
			height: 95%;
		}

		60% {
			width: 40%;
			height: 50%;
		}

		65% {
			width: 100%;
			height: 60%;
		}

		70% {
			width: 100%;
			height: 70%;
		}

		75% {
			width: 90%;
			height: 70%;
		}

		80% {
			width: 50%;
			height: 70%;
		}

		85% {
			width: 90%;
			height: 50%;
		}

		85% {
			width: 40%;
			height: 70%;
		}

		90% {
			width: 90%;
			height: 30%;
		}

		95% {
			width: 100%;
			height: 10%;
		}
	}

	@keyframes tongue {

		0%,
		20%,
		100% {
			bottom: -80px;
		}

		30%,
		90% {
			bottom: -40px;
		}

		40% {
			bottom: -45px;
		}

		50% {
			bottom: -50px;
		}

		70% {
			bottom: -80px;
		}

		90% {
			bottom: -40px;
		}
	}
</style>